<template>
  <div>
    <div class="toolbar">
      <!-- 第一行：按钮操作区 -->
      <div
        class="action-buttons"
        style="margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px"
      >
        <el-button type="primary" @click="dialogVisible = true">
          <el-icon><Plus /></el-icon> 新增出货记录
        </el-button>

        <el-button type="primary" @click="downloadTemplate">
          <el-icon><Download /></el-icon> 下载导入模板
        </el-button>

        <el-upload
          action="http://10.0.8.42:8089/api/shipment/batchImport"
          accept=".xlsx"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <el-button type="primary">批量导入 Excel</el-button>
        </el-upload>

        <el-button type="primary" @click="refreshDynamicFields">
          <el-icon><Refresh /></el-icon> 刷新数据
        </el-button>

        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>

        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>

      <!-- 第二行：筛选表单区（自动换行） -->
      <el-form :inline="true" label-width="0" class="filter-form">
        <el-form-item>
          <el-input
            v-model="lotIdFilter"
            placeholder="请输入工卡号"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="plannerFilter"
            placeholder="请输入计划员"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="ownerFilter"
            placeholder="请输入产品负责人"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="custCode"
            placeholder="请输入客户代码"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="device"
            placeholder="请输入产品型号"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="shipmentStatusFilter"
            placeholder="筛选出货状态"
            clearable
            style="width: 160px"
          >
            <el-option label="已发货" value="已发货" />
            <el-option label="未完成" value="未完成" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="cpStatus"
            placeholder="筛选站点"
            clearable
            style="width: 160px"
          >
            <el-option
              v-for="status in cpStatusArray"
              :key="status"
              :label="status"
              :value="status"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="cpStationStatus"
            multiple
            placeholder="筛选站点状态"
            clearable
            style="width: 160px"
          >
            <el-option
              v-for="status in cpStationStatusArray"
              :key="status"
              :label="status"
              :value="status"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="createDateRange"
            type="daterange"
            start-placeholder="创建开始时间"
            end-placeholder="创建结束时间"
            style="width: 300px"
          />
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="shipmentDateRange"
            type="daterange"
            start-placeholder="出货开始时间"
            end-placeholder="出货结束时间"
            style="width: 300px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="fetchShipments">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格展示区 -->
    <el-table
      :data="rows"
      stripe
      border
      class="shipment-table"
      empty-text="暂无数据，请点击左上角新增"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="出货状态" align="center" sortable>
        <template #default="{ row }">
          <el-tag
            :type="row.station == 'CP-PACK-FINISH' ? 'success' : 'primary'"
            effect="dark"
          >
            {{ row.station == "CP-PACK-FINISH" ? "已发货" : "未完成" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="80" align="center">
        <template #default="{ row, $index }">
          <el-button type="primary" size="small" @click="openEdit(row)">
            <el-icon><Edit /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="left" width="80" align="center">
        <template #default="{ row, $index }">
          <el-button type="danger" size="small" @click="deleteRow(row.lotId)">
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="工卡号" prop="lotId" width="120" />
      <el-table-column
        label="出货日期"
        prop="date"
        width="100"
        :formatter="row => formatDate(row.date)"
        sortable
      />
      <el-table-column
        label="创建日期"
        prop="createDate"
        :formatter="row => formatDate(row.createDate)"
        width="100"
        sortable
      />
      <el-table-column label="计划员" prop="planner" width="100">
        <template #default="{ row }">
          <el-tag> {{ row.planner || "无" }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="产品负责人" prop="owner" width="100">
        <template #default="{ row }">
          <el-tag> {{ row.owner || "无" }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="出货片号"
        prop="shipNo"
        width="100"
      ></el-table-column>

      <el-table-column label="优先级" prop="priority" width="100" sortable />
      <el-table-column label="储位号" prop="storage" width="100" sortable />
      <el-table-column label="站点" prop="station" width="100" sortable />
      <el-table-column
        label="站点状态"
        prop="stationStatus"
        width="100"
        sortable
      />
      <el-table-column label="备注" prop="note" />
      <el-table-column label="延期原因" prop="delayReason" />
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 弹窗：新增表单 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增出货计划"
      width="700px"
      center
    >
      <el-form :model="form" label-width="120px" label-position="left">
        <el-form-item label="工卡号">
          <el-input v-model="form.lotId" placeholder="请输入工卡号" />
        </el-form-item>
        <el-form-item label="出货要求日期">
          <el-date-picker
            v-model="form.date"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="计划员姓名">
          <el-input v-model="form.planner" placeholder="张三" />
        </el-form-item>

        <el-form-item label="出货片">
          <el-input
            v-model="form.shipNo"
            placeholder="请输入出货片，多个用逗号隔开"
          />
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="form.priority" placeholder="请选择优先级">
            <el-option label="常规" value="常规" />
            <el-option label="加急" value="加急" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划部备注">
          <el-input v-model="form.note" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="出货延期原因">
          <el-input v-model="form.delayReason" placeholder="请输入原因" />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定添加</el-button>
      </template>
    </el-dialog>

    <!-- 弹窗：编辑表单 -->
    <el-dialog v-model="editVisible" title="编辑出货记录" width="640px">
      <el-form
        :model="editForm"
        :rules="editRules"
        ref="editFormRef"
        label-width="110px"
      >
        <el-form-item label="工卡号" prop="lotId">
          <el-input v-model="editForm.lotId" disabled />
          <!-- 按 lotId 更新，禁改 -->
        </el-form-item>
        <el-form-item label="出货日期" prop="date">
          <el-date-picker
            v-model="editForm.date"
            type="date"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="计划员" prop="planner">
          <el-input v-model="editForm.planner" />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="editForm.priority" placeholder="请选择">
            <el-option label="常规" value="常规" />
            <el-option label="加急" value="加急" />
          </el-select>
        </el-form-item>
        <el-form-item label="出货片号" prop="shipNo">
          <el-input v-model="editForm.shipNo" placeholder="1-25片" />
        </el-form-item>
        <el-form-item label="计划备注" prop="note">
          <el-input v-model="editForm.note" />
        </el-form-item>
        <el-form-item label="延期原因" prop="delayReason">
          <el-input v-model="editForm.delayReason" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { Plus, Delete, Refresh, Download, Edit } from "@element-plus/icons-vue";
import axios from "axios";

// 表格数据
const rows = ref([]);
const selectedRows = ref([]); // 选中的行
// 分页相关
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 搜索条件
const lotIdFilter = ref("");
const plannerFilter = ref("");
const ownerFilter = ref(""); // 新增产品负责人筛选项
const shipmentStatusFilter = ref("未完成"); // 新增出货状态筛选项
const custCode = ref(""); // 客户代码
const device = ref(""); // 产品型号
const createDateRange = ref([]); // 创建日期范围
const shipmentDateRange = ref([]); // 出货日期范围
const cpStatus = ref("");
const cpStatusArray = [
  "AOI",
  "CP-BAKE",
  "CP-EQC",
  "CP-FINISH",
  "CP-IQC",
  "CP-IQC-AUTO",
  "CP-MERGE",
  "CP-OQC",
  "CP-OQC-AUTO",
  "CP-PACK",
  "CP-PACK-FINISH",
  "CP-PACK-QC",
  "CP-PACK-RECIVE",
  "CP-SHIP",
  "CP-TXFER-IN",
  "CP1",
  "CP1-BAKE",
  "CP1-STANDING",
  "CP2",
  "CP2-BAKE",
  "CP2-STANDING",
  "CP2-UV",
  "CP3",
  "CP3-BAKE",
  "CP3-STANDING",
  "CP4",
  "CP5",
  "CP6",
  "CP7",
  "CP8",
  "INK",
  "INK-CURE",
  "UV",
  "WF-CLEAN"
];
const cpStationStatus = ref([]);
const cpStationStatusArray = ["FINISH", "WAIT", "RUN", "RHLD", "TRAN", "HELD"];

// 编辑表单
const editVisible = ref(false);
const editFormRef = ref();
const editForm = reactive({
  lotId: "",
  date: "",
  planner: "",
  priority: "",
  shipNo: "",
  note: "",
  delayReason: ""
});

const editRules = {
  date: [{ required: true, message: "请选择出货日期", trigger: "blur" }],
  planner: [{ required: true, message: "请输入计划员", trigger: "blur" }],
  priority: [{ required: true, message: "请选择优先级", trigger: "change" }],
  shipNo: [
    {
      required: true,
      message: "请选择出货片号",
      trigger: "change"
    }
  ]
};

// const API_SHIPMENT_ADD = "https://localhost:44389/api/shipment/add";
// const API_SHIPMENT_QUERY = "https://localhost:44389/api/shipment/query";
// const API_SHIPMENT_GET_PRODUCTION_PLAN_BY_LOT_ID =
//   "https://localhost:44389/api/shipment/getProductionPlanByLotId";

// const API_SHIPMENT_DELETE =
//   "https://localhost:44389/api/shipment/deleteByLotId/";

// const API_SHIPMENT_BATCH_IMPORT =
//   "https://localhost:44389/api/shipment/batchImport";

// const API_SHIPMENT_BATCH_DELETE =
//   "https://localhost:44389/api/shipment/batchDelete";

// const API_SHIPMENT_UPDATE =
//   "https://localhost:44389/api/shipment/updateByLotId/";

// const API_SHIPMENT_EXPORT = "https://localhost:44389/api/shipment/export";

const API_SHIPMENT_ADD = "http://10.0.8.42:8089/api/shipment/add";
const API_SHIPMENT_QUERY = "http://10.0.8.42:8089/api/shipment/query";
const API_SHIPMENT_GET_PRODUCTION_PLAN_BY_LOT_ID =
  "http://10.0.8.42:8089/api/shipment/getProductionPlanByLotId";

const API_SHIPMENT_DELETE = "http://10.0.8.42:8089/api/shipment/deleteByLotId/";

const API_SHIPMENT_BATCH_IMPORT =
  "http://10.0.8.42:8089/api/shipment/batchImport";

const API_SHIPMENT_BATCH_DELETE =
  "http://10.0.8.42:8089/api/shipment/batchDelete";

const API_SHIPMENT_UPDATE = "http://10.0.8.42:8089/api/shipment/updateByLotId/";

const API_SHIPMENT_EXPORT = "http://10.0.8.42:8089/api/shipment/export";

// 表单弹窗控制
const dialogVisible = ref(false);

// 定时刷新器
let refreshTimer = null;

const formatDate = date => {
  if (!date) return "";

  const d = new Date(date);
  if (isNaN(d.getTime())) return date; // 判断是否为有效日期

  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
  const day = String(d.getDate()).padStart(2, "0"); // 日期需要补充为两位数

  return `${year}-${month}-${day}`; // 返回 YYYY-MM-DD 格式
};

// 当前表单模型
const form = reactive({
  lotId: "",
  date: "",
  planner: "",
  priority: "",
  note: "",
  delayReason: "",
  shipNo: ""
});

// 确定添加按钮
const confirmAdd = async () => {
  if (!form.lotId || !form.date) {
    ElMessage.warning("工卡号和出货日期必填");
    return;
  }

  try {
    // 向后端提交数据
    await axios.post(API_SHIPMENT_ADD, {
      lotId: form.lotId,
      date: form.date,
      planner: form.planner,
      priority: form.priority,
      note: form.note,
      shipNo: form.shipNo,
      delayReason: form.delayReason
    });

    ElMessage.success("添加成功");
    dialogVisible.value = false;

    // 清空表单
    Object.keys(form).forEach(k => (form[k] = ""));

    // 刷新数据（重新获取表格）
    fetchShipments();
  } catch (error) {
    ElMessage.error(
      error?.response?.data?.message ||
        error?.message ||
        "添加失败，请检查输入或接口状态"
    );
  }
};

// 加载分页数据
const fetchShipments = async () => {
  const stationParam =
    shipmentStatusFilter.value === "已发货"
      ? "CP-PACK-FINISH"
      : shipmentStatusFilter.value === "未完成"
        ? "未完成"
        : "";

  const loading = ElLoading.service({
    lock: true,
    text: "加载中...",
    background: "rgba(0,0,0,0.3)"
  });

  const [createDateFrom, createDateTo] =
    Array.isArray(createDateRange.value) && createDateRange.value.length === 2
      ? createDateRange.value
      : [null, null];

  const [shipmentDateFrom, shipmentDateTo] =
    Array.isArray(shipmentDateRange.value) &&
    shipmentDateRange.value.length === 2
      ? shipmentDateRange.value
      : [null, null];

  try {
    const res = await axios.get(API_SHIPMENT_QUERY, {
      params: {
        page: page.value,
        pageSize: pageSize.value,
        lotId: lotIdFilter.value,
        planner: plannerFilter.value,
        owner: ownerFilter.value, // 新增产品负责人筛选
        custCode: custCode.value,
        device: device.value,
        station: stationParam,
        cpStatus: cpStatus.value,
        cpStationStatus: cpStationStatus.value.join(","),
        createDateFrom: createDateFrom ? formatDate(createDateFrom) : "",
        createDateTo: createDateTo ? formatDate(createDateTo) : "",
        planDateFrom: shipmentDateFrom ? formatDate(shipmentDateFrom) : "",
        planDateTo: shipmentDateTo ? formatDate(shipmentDateTo) : ""
      }
    });

    const baseRows = res.data.items || [];
    total.value = res.data.total || 0;

    // 初始化展示数据（显示加载中）
    rows.value = baseRows.map(r => ({
      ...r,
      storage: "加载中...",
      station: "加载中...",
      stationStatus: "加载中..."
    }));

    // 遍历每条记录，补充动态字段
    const enrichedRows = await Promise.all(
      baseRows.map(async row => {
        const dynamic = await fetchLotStatus(row.lotId);
        return {
          ...row,
          storage: dynamic.storage,
          station: dynamic.station,
          stationStatus: dynamic.stationStatus
        };
      })
    );

    console.log(enrichedRows);

    // // 根据出货状态筛选（如果有选值）
    // let finalRows = enrichedRows;
    // if (shipmentStatusFilter.value) {
    //   finalRows = enrichedRows.filter(row => {
    //     const status = row.station === "CP-PACK-FINISH" ? "已发货" : "未完成";
    //     return status === shipmentStatusFilter.value;
    //   });
    // }

    rows.value = enrichedRows;
  } catch (error) {
    ElMessage.error(
      error?.response?.data?.message ||
        error?.message ||
        "获取数据失败，请检查接口状态"
    );
  } finally {
    loading.close();
  }
};

// 获取动态字段接口
const fetchLotStatus = async lotId => {
  try {
    const res = await axios.get(API_SHIPMENT_GET_PRODUCTION_PLAN_BY_LOT_ID, {
      params: { lotId }
    });
    return res.data;
  } catch (e) {
    return {
      storage: "获取失败",
      station: "-",
      stationStatus: "-"
    };
  }
};

// 页码变更时触发
const handlePageChange = newPage => {
  page.value = newPage;
  fetchShipments();
};

const handleSizeChange = newSize => {
  pageSize.value = newSize;
  fetchShipments();
};

// 定时刷新当前页所有动态字段（不更新基础字段）
const refreshDynamicFields = () => {
  rows.value.forEach(async row => {
    const dynamic = await fetchLotStatus(row.lotId); // 已缓存或实时
    row.storage = dynamic.storage;
    row.station = dynamic.station;
    row.stationStatus = dynamic.stationStatus;
  });
};

const deleteRow = lotId => {
  ElMessageBox.confirm(`确定要删除工卡号为 ${lotId} 的记录吗？`, "警告", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        console.log(`${API_SHIPMENT_DELETE}${lotId}`);

        const res = await axios.delete(`${API_SHIPMENT_DELETE}${lotId}`);
        ElMessage.success(res.data.message || "删除成功");

        // 删除成功后刷新当前数据
        fetchShipments();
      } catch (err) {
        ElMessage.error(
          err?.response?.data?.message || err?.message || "删除失败"
        );
      }
    })
    .catch(() => {
      // 用户取消
    });
};

const handleUploadSuccess = res => {
  ElMessage.success(
    res?.data?.message || res?.message || "导入成功，请刷新表格查看最新数据"
  );

  fetchShipments();
};

const handleUploadError = error => {
  ElMessage.error(
    error?.response?.data?.message ||
      error?.message ||
      "上传失败，请检查文件格式或网络"
  );
};

const downloadTemplate = () => {
  window.open("http://10.0.8.42:8089/static/出货导入模板.xlsx", "_blank");
};

const handleSelectionChange = val => {
  selectedRows.value = val;
};

// 批量删除按钮点击事件
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请先选择要删除的记录！");
    return;
  }

  ElMessageBox.confirm("确认删除选中的记录？", "批量删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        const lotIds = selectedRows.value.map(row => row.lotId);
        const res = await axios.post(API_SHIPMENT_BATCH_DELETE, lotIds);

        ElMessage.success("删除成功！");
        await fetchShipments(); // 刷新表格
      } catch (error) {
        ElMessage.error("删除失败：" + error);
      }
    })
    .catch(() => {
      // 用户取消
    });
};

// 打开编辑弹窗（用当前行填充）
const openEdit = row => {
  editForm.lotId = row.lotId;
  editForm.date = row.date?.slice(0, 10) ?? ""; // 确保是 YYYY-MM-DD
  editForm.planner = row.planner;
  editForm.priority = row.priority;
  editForm.shipNo = row.shipNo ?? null;
  editForm.note = row.note;
  editForm.delayReason = row.delayReason;
  editVisible.value = true;
};

// 提交保存
const submitEdit = () => {
  editFormRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await axios.put(
        `${API_SHIPMENT_UPDATE}${encodeURIComponent(editForm.lotId)}`,
        {
          lotId: editForm.lotId,
          date: editForm.date,
          planner: editForm.planner,
          priority: editForm.priority,
          shipNo: Array.isArray(editForm.shipNo)
            ? editForm.shipNo.join(",")
            : editForm.shipNo,
          note: editForm.note,
          delayReason: editForm.delayReason
        }
      );
      ElMessage.success("保存成功");
      editVisible.value = false;
      fetchShipments(); // 重新加载列表
    } catch (e) {
      ElMessage.error(e?.response?.data?.message || e?.message || "保存失败");
    }
  });
};

// 导出按钮点击事件
const handleExport = async () => {
  const stationParam =
    shipmentStatusFilter.value === "已发货"
      ? "CP-PACK-FINISH"
      : shipmentStatusFilter.value === "未完成"
        ? "未完成"
        : "";

  const loading = ElLoading.service({
    lock: true,
    text: "导出excel...",
    background: "rgba(0,0,0,0.3)"
  });

  const [createDateFrom, createDateTo] =
    Array.isArray(createDateRange.value) && createDateRange.value.length === 2
      ? createDateRange.value
      : [null, null];

  const [shipmentDateFrom, shipmentDateTo] =
    Array.isArray(shipmentDateRange.value) &&
    shipmentDateRange.value.length === 2
      ? shipmentDateRange.value
      : [null, null];

  try {
    const response = await axios.get(API_SHIPMENT_EXPORT, {
      params: {
        lotId: lotIdFilter.value,
        planner: plannerFilter.value,
        owner: ownerFilter.value, // 新增产品负责人筛选
        custCode: custCode.value,
        device: device.value,
        station: stationParam,
        cpStatus: cpStatus.value,
        cpStationStatus: cpStationStatus.value.join(","),
        createDateFrom: createDateFrom ? formatDate(createDateFrom) : "",
        createDateTo: createDateTo ? formatDate(createDateTo) : "",
        planDateFrom: shipmentDateFrom ? formatDate(shipmentDateFrom) : "",
        planDateTo: shipmentDateTo ? formatDate(shipmentDateTo) : ""
      },

      responseType: "blob"
    });

    const blob = new Blob([response.data], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    });

    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = `shipment${new Date().toISOString().slice(0, 19).replace(/[-T:]/g, "")}.xlsx`;
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    ElMessage.error(
      error?.response?.data?.message ||
        error?.message ||
        "获取数据失败，请检查接口状态"
    );
  } finally {
    loading.close();
  }
};

// 页面初次加载
onMounted(() => {
  fetchShipments();

  refreshTimer = setInterval(() => {
    refreshDynamicFields();
  }, 300000);
});
</script>

<style scoped>
.toolbar {
  display: flex;
  /* justify-content: flex-end; */
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.shipment-table {
  border-radius: 8px;
  overflow: hidden;
}
.el-dialog__body {
  padding-top: 10px;
  padding-bottom: 0;
}

.example-pagination-block {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
</style>
